<template>
  <div class="wrapper">
    <common-header :title="title"></common-header>
    <div class="compile"
         @click="handleShowCheckBox"
         ref="compile">编辑</div>
    <div class="delete"
         v-show="compile"
         @click="handleDelete">删除</div>

    <common-scroll :data="history"
                   ref="scroll"
                   class="scroll">
      <div class="content">
        <common-checkbox :lists="history"
                         v-if="history.length > 0"
                         :compile="compile"
                         @delete="handleDeleteList"
                         class="checkbox"
                         ref="checkbox">
          <common-product slot-scope="props"
                          :shopInfo="props.shopInfo"
                          class="product"
                          @skip="handleSkipShop"></common-product>
        </common-checkbox>
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonHeader from 'common/header/Header'
import CommonScroll from 'common/scroll/Scroll'
import CommonProduct from 'common/product/Product'
import CommonCheckbox from 'common/checkBox/CheckBox'
export default {
  name: 'MeFootmark',
  components: {
    CommonHeader,
    CommonScroll,
    CommonProduct,
    CommonCheckbox
  },
  data () {
    return {
      title: '我的足迹',
      checked: true,
      compile: false,
      deleteList: [],
      history: []
    }
  },
  activated () {
    setTimeout(() => {
      this.browsingHistory()
    }, 200)
  },
  deactivated () {
    this.history = []
  },
  methods: {
    loadDataed () {
      if (!this.checkLoad) {
        this.$refs.scroll.refresh()
      }
      this.checkLoad = true
    },
    browsingHistory () {
      let history = JSON.parse(this.$localStorage.get('browsingHistory'))
      if (history != null) {
        this.history = history
      } else {
        this.history = []
      }
    },
    handleShowCheckBox () {
      const TEXT = '编辑'
      const TEXT2 = '取消'
      const content = this.$refs.compile.innerHTML
      if (content === TEXT) {
        this.compile = true
        this.$refs.compile.innerHTML = TEXT2
      } else {
        this.compile = false
        this.$refs.compile.innerHTML = TEXT
      }
    },
    handleDeleteList (list) {
      this.deleteList = list
    },
    handleDelete () {
      const TEXT = '编辑'
      const list = this.deleteList
      this.compile = false
      this.$refs.compile.innerHTML = TEXT
      if (list.length === 0) {
        return false
      }
      for (let i = list.length - 1; i >= 0; i--) {
        this.history.splice(i, 1)
      }
      this.$localStorage.set('browsingHistory', JSON.stringify(this.history))
    },
    handleSkipShop (href) {
      if (!this.compile) {
        this.$router.push({
          path: href
        })
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    this.compile = false
    const TEXT = '编辑'
    this.$refs.compile.innerHTML = TEXT
    next()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> [border-bottom-1px]
  border none

.wrapper
  touch-action none
  top 0
  left 0
  bottom 0
  right 0
  z-index 5
  background-color $bgcWh
  position absolute

  .scroll
    top 100px

    .content
      padding-top 10px
      box-sizing border-box

      .checkbox
        height 100%

  .compile
    position absolute
    top 0px
    right 0
    width 100px
    text-align right
    height 80px
    line-height 80px
    padding-right 20px
    box-sizing border-box
    font-size $smallFz
    color $graySecond
    z-index 100

  .delete
    width 100%
    height 80px
    line-height 80px
    text-align center
    border-radius 4px
    position fixed
    bottom 0
    right 0
    z-index 100
    color $whiteFzClor
    background-color #f44336
    font-size $fzThird
</style>
